.digital-assistant-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  .floating-assistant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    .assistant-avatar {
      position: relative;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      animation: bounce 2s infinite;

      &:hover {
        transform: scale(1.1);
      }

      .avatar-pulse {
        position: relative;

        &::before {
          content: "";
          position: absolute;
          top: -8px;
          left: -8px;
          right: -8px;
          bottom: -8px;
          border: 2px solid #1890ff;
          border-radius: 50%;
          animation: pulse 1.5s infinite;
          opacity: 0.6;
        }

        .assistant-avatar-img {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border: 3px solid #fff;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

          .avatar-icon {
            font-size: 28px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
          }
        }
      }
    }

    .chat-bubble-btn {
      background: linear-gradient(135deg, #1890ff, #40a9ff);
      border: none;
      border-radius: 20px;
      height: 36px;
      padding: 0 16px;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(24, 144, 255, 0.5);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }

  .chat-container {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    user-select: none;
    will-change: transform; // 优化性能

    // 优化拖拽状态
    &.dragging {
      transform: scale(1.02) rotate(0.5deg);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
      z-index: 10001;

      .chat-header {
        background: linear-gradient(135deg, #1890ff20, #40a9ff20);
        cursor: grabbing !important;
      }
    }

    // 最大化状态
    &.maximized {
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);

      .chat-header {
        background: linear-gradient(135deg, #1890ff, #40a9ff);

        .title-section h4 {
          color: white;
        }

        .status {
          color: rgba(255, 255, 255, 0.9);
        }

        .actions .ant-btn {
          color: white;

          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }
        }
      }
    }

    &.minimized {
      .chat-header {
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }

    .chat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 20px;
      background: linear-gradient(135deg, #f6f8fc, #ffffff);
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      position: relative;
      transition: all 0.2s ease;

      &.drag-handle {
        &:not([style*="cursor: default"]) {
          cursor: grab !important;
        }

        &:active {
          cursor: grabbing !important;
        }
      }

      .avatar-section {
        display: flex;
        align-items: center;
        gap: 12px;

        .ant-badge {
          .ant-avatar {
            border: 2px solid #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }
        }

        .title-section {
          h4 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: #1c1c1e;
            transition: color 0.3s ease;
          }

          .status {
            font-size: 12px;
            color: #8e8e93;
            transition: color 0.3s ease;
          }
        }
      }

      .actions {
        display: flex;
        gap: 4px;

        .ant-btn {
          border: none;
          box-shadow: none;
          transition: all 0.2s ease;

          &:hover {
            background: rgba(0, 0, 0, 0.05);
            transform: scale(1.1);
          }

          &:active {
            transform: scale(0.95);
          }
        }
      }
    }

    .chat-body {
      display: flex;
      flex-direction: column;
      height: calc(100% - 80px);

      .messages-container {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        background: #fafafa;

        // 自定义滚动条
        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-track {
          background: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.2);
          border-radius: 3px;

          &:hover {
            background: rgba(0, 0, 0, 0.3);
          }
        }

        .message {
          display: flex;
          gap: 12px;
          margin-bottom: 16px;
          animation: fadeInUp 0.3s ease;

          &.user {
            flex-direction: row-reverse;

            .message-content {
              background: linear-gradient(135deg, #1890ff, #40a9ff);
              color: white;
              border-radius: 18px 18px 4px 18px;

              .message-files {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                padding: 8px;
                margin-bottom: 8px;

                .file-item {
                  display: flex;
                  align-items: center;
                  gap: 6px;
                  color: rgba(255, 255, 255, 0.9);
                  font-size: 12px;

                  .anticon {
                    font-size: 14px;
                  }
                }
              }
            }

            .message-avatar {
              margin-left: 8px;
              margin-right: 0;
            }
          }

          &.assistant {
            .message-content {
              background: white;
              color: #1c1c1e;
              border-radius: 18px 18px 18px 4px;
              border: 1px solid rgba(0, 0, 0, 0.08);

              .message-files {
                background: #f5f5f5;
                border-radius: 8px;
                padding: 8px;
                margin-bottom: 8px;

                .file-item {
                  display: flex;
                  align-items: center;
                  gap: 6px;
                  color: #666;
                  font-size: 12px;

                  .anticon {
                    font-size: 14px;
                  }
                }
              }
            }

            .message-avatar {
              margin-right: 8px;
            }
          }

          .message-avatar {
            .ant-avatar {
              border: 2px solid #fff;
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            }
          }

          .message-content {
            max-width: 70%;
            padding: 12px 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            position: relative;
            transition: all 0.2s ease;

            &:hover {
              transform: translateY(-1px);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }

            .message-text {
              line-height: 1.5;
              word-wrap: break-word;
              white-space: pre-wrap;
            }

            .message-time {
              font-size: 11px;
              opacity: 0.6;
              margin-top: 4px;
              text-align: right;
            }
          }
        }
      }

      // 文件上传区域
      .upload-area {
        padding: 12px 16px;
        background: #f8f9fa;
        border-top: 1px solid rgba(0, 0, 0, 0.06);

        .ant-upload-list {
          .ant-upload-list-item {
            padding: 8px;
            border-radius: 8px;
            background: white;
            border: 1px solid rgba(0, 0, 0, 0.08);
            margin-bottom: 8px;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      .quick-actions {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        background: #f8f9fa;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        flex-wrap: wrap;

        .ant-btn {
          border-radius: 20px;
          font-size: 12px;
          height: 32px;
          padding: 0 12px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          background: white;
          transition: all 0.2s ease;

          &:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }

          &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
          }
        }
      }

      .chat-input {
        padding: 16px;
        background: white;
        border-top: 1px solid rgba(0, 0, 0, 0.08);

        .input-container {
          display: flex;
          gap: 8px;
          align-items: flex-end;

          .message-input {
            flex: 1;
            border-radius: 20px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            padding: 8px 16px;
            resize: none;
            transition: all 0.2s ease;

            &:focus {
              border-color: #1890ff;
              box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            }

            &:disabled {
              background: #f5f5f5;
              cursor: not-allowed;
            }
          }

          .input-actions {
            display: flex;
            gap: 4px;
            align-items: center;

            .stop-btn {
              border-radius: 50%;
              width: 36px;
              height: 36px;
              padding: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #ff4d4f;
              border-color: #ff4d4f;
              color: white;
              transition: all 0.2s ease;

              &:hover {
                background: #ff7875;
                border-color: #ff7875;
                transform: scale(1.05);
              }

              &:active {
                transform: scale(0.95);
              }
            }

            .send-btn {
              border-radius: 50%;
              width: 36px;
              height: 36px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1890ff, #40a9ff);
            border: none;
            transition: all 0.2s ease;

            &:hover:not(:disabled) {
              transform: scale(1.05);
                box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
            }

              &:active:not(:disabled) {
              transform: scale(0.95);
            }

            &:disabled {
                opacity: 0.5;
                cursor: not-allowed;
              transform: none;
              box-shadow: none;
              }
            }
          }
        }
      }
    }
  }
}

// 动画定义
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

// 响应式适配
@media (max-width: 768px) {
  .digital-assistant-container {
    bottom: 10px;
    right: 10px;

    .chat-container {
      &.maximized {
        width: calc(100vw - 20px) !important;
        height: calc(100vh - 60px) !important;
        left: 10px !important;
        top: 30px !important;
      }
    }

    .floating-assistant {
      .assistant-avatar {
        .avatar-pulse {
          .assistant-avatar-img {
            width: 50px !important;
            height: 50px !important;

            .avatar-icon {
              font-size: 24px;
            }
          }
        }
      }

      .chat-bubble-btn {
        font-size: 12px;
        height: 32px;
        padding: 0 12px;
      }
    }

    .chat-container {
      .chat-body {
        .messages-container {
          .message {
            .message-content {
              max-width: 85%;
              padding: 10px 12px;
            }
          }
        }

        .quick-actions {
          .ant-btn {
            font-size: 12px;
            height: 28px;
            min-width: 70px;
          }
        }

        .chat-input {
          .input-container {
            .message-input {
              font-size: 14px;
            }

            .send-btn {
              height: 36px;
              width: 36px;
            }
          }
        }
      }
    }
  }
}

// 平板适配
@media (max-width: 1024px) and (min-width: 769px) {
  .digital-assistant-container {
    .chat-container {
      &.maximized {
        width: calc(100vw - 40px) !important;
        height: calc(100vh - 80px) !important;
      }
    }
  }
}

// 考试模式样式
.chat-container.exam-mode {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(255, 77, 79, 0.15);
  border: 1px solid rgba(255, 77, 79, 0.2);
  overflow: hidden;
  user-select: none;

  .chat-header {
    background: linear-gradient(135deg, #fff2f0, #fff);
    border-bottom: 1px solid rgba(255, 77, 79, 0.1);

    .avatar-section {
      .ant-badge {
        .ant-avatar {
          background: linear-gradient(135deg, #ff4d4f, #ff7875);
          border: 2px solid #fff;
          box-shadow: 0 2px 8px rgba(255, 77, 79, 0.2);
        }
      }

      .title-section {
        h4 {
          color: #ff4d4f;
          font-weight: 600;
        }

        .status {
          color: #ff7875;
          font-weight: 500;
        }
      }
    }

    .actions {
      .ant-btn {
        color: #ff4d4f;

        &:hover {
          background: rgba(255, 77, 79, 0.1);
          color: #ff7875;
        }
      }
    }
  }

  .chat-body {
    .exam-warning {
      .ant-alert {
        border: 1px solid #ffd591;
        background: #fffbe6;
        border-radius: 8px;

        .ant-alert-icon {
          color: #fa8c16;
        }

        .ant-alert-message {
          color: #d46b08;
          font-weight: 600;
        }

        .ant-alert-description {
          color: #8c8c8c;
          margin-top: 4px;
        }
      }
    }
  }
}

// 考试模式动画
@keyframes examWarning {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(255, 77, 79, 0.15);
  }
  50% {
    box-shadow: 0 8px 32px rgba(255, 77, 79, 0.25);
  }
}

.chat-container.exam-mode {
  animation: examWarning 2s ease-in-out infinite;
}

// 等待动画样式
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;

  .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #1890ff;
    animation: typing 1.4s infinite ease-in-out;

    &:nth-child(1) {
      animation-delay: -0.32s;
    }

    &:nth-child(2) {
      animation-delay: -0.16s;
    }

    &:nth-child(3) {
      animation-delay: 0s;
    }
  }
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
